<template>
  <div class="app-container calendar-list-container">
    <buttons :showQuery="true" :showBack="true" @query="doQuery" :list="btnList" :disabled="disabled" placeholder="订单号" :permissions="permissions" @add="doAdd" @delete="doDelete">
    </buttons>
    <grid gridTitle="扣款单" :url="url" :columns="columns" :enableEdit="false" :loading="true" ref="mainGrid" height="auto" diffHeight="115" :pagination="true"
      :permissions="permissions" :multi="false" @change="rowCilck" :queryEntity="queryEntity" @delete="doDelete">
    </grid>

    <el-dialog title="新增扣款" :visible.sync="dialogVisible">
      <div>
        <el-form ref="entity" label-width="80px" size="small">
          <el-row>
            <el-col :span="8">
              <el-form-item label="全款金额" prop="amount">
                <el-input v-model="entity.amount" type="number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="描述" prop="remark">
                <el-input v-model="entity.remark" :readonly="false"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import request from '@/router/axios'
import { Message, MessageBox } from 'element-ui'
import url from '@/const/apiURL'
import grid from '@/components/Grid'
import buttons from '@/components/Buttons'
import { mapGetters } from 'vuex'
import { BusinessOrderStatusFormatter, BusinessTypeFormatter } from '@/const/dict'
import search from '@/components/Search'
import { colunms } from '@/const/colunms'
import { dict } from '@/const/dict'
import { queryField } from '@/const/query'

export default {
  components: { grid, buttons, search },
  data () {
    return {
      orderNo: '',
      url: url.DUDECTION_LIST_URL,
      entity: { businessCode: this.businessCode },
      queryEntity: { businessCode: this.businessCode },
      disabled: true,
      dialogVisible: false,
      columns: [
        {
          label: '操作', width: 80, prop: 'op', align: 'center', template: 'op', opList: [
            { name: '删除', clickName: 'delete', auth: 'business_deduction_delete', confirm: true }
          ]
        },
        { label: '扣款单号', width: 180, prop: 'deductionCode', align: 'left' },
        { label: '订单编号', width: 180, prop: 'orderNo', align: 'left' },
        { label: '加工单号', width: 180, prop: 'businessCode', align: 'left' },
        { label: '客户名称', width: 120, prop: 'customerName', align: 'center' },
        { label: '扣款金额', width: 120, prop: 'amount', align: 'center' },
        { label: '描述', width: 260, prop: 'remark', align: 'center' },
        { label: '创建人', width: 120, prop: 'createUserName', align: 'center' },
        { label: '创建时间', width: 100, prop: 'createTime', align: 'center' }
      ],
      btnList: [
        { name: '新增', type: 'primary', icon: 'edit', click: 'add', auth: 'business_deduction_add', ctr: false },
        // { name: '删除', type: 'primary', icon: 'edit', click: 'delete', auth: 'business_deduction_delete', ctr: true, confirm: true }
      ]
    }
  },
  created () {
    this.businessCode = this.$route.query.businessCode
    this.queryEntity.businessCode = this.$route.query.businessCode
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    doQuery (text) {
      this.$refs['mainGrid'].doQuery(text)
    },
    rowCilck (row) {
      this.disabled = row.length == 0
    },
    doAdd () {
      this.entity = { businessCode: this.businessCode }
      this.dialogVisible = true
    },
    saveData () {
      this.saveUrl(this.entity).then(data => {
        if (data) {
          this.dialogVisible = false
          this.$refs['mainGrid'].reload()
        }
      })
    },
    saveUrl (data) {
      return request({
        url: url.DUDECTION_ADD_URL,
        method: 'post',
        data: data
      })
    },
    doDelete (row) {
      // const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.deleteOp(row.deductionCode).then(data => {
          if (data) {
            this.$refs['mainGrid'].reload()
          }
        })
      }
    },
    deleteOp (deductionCode) {
      return request({
        url: url.DUDECTION_DELETE_URL,
        method: 'post',
        data: { key: 'key' },
        params: { deductionCode: deductionCode }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.w-body {
  padding-top: 8px;
}
.w-table {
  border: 1px solid #ebeef5;
}
.w-table-title {
  border: 1px solid #ebeef5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  width: 100%;
  font-size: 14px;
  color: gray;
}
</style>
